<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="交互" name="interaction" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        
        <el-form v-show="currentTab==='field'" size="small" label-width="90px">
        <el-collapse  v-model="activeNames" accordion>
          <el-collapse-item title="图层" name="1">
            <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
              <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="表格列" name="2">
            <draggable
              
              :animation="340"
              group="selectItem"
              handle=".option-drag"
            >  
            <div style="display:flex">
              <el-form-item label="列名"></el-form-item>
              <el-form-item label="列值"></el-form-item>
              <el-form-item label="宽度(%)"></el-form-item>
            </div>
            
            
              <div v-for="(item, index) in cols" :key="index" class="select-item">
                
                  <el-input v-model="item.title" placeholder="列名" size="small"   @blur.prevent="changeCols()"/>
                  <el-input v-model="item.field" placeholder="列值" size="small"   @blur.prevent="changeCols()"/>
                  <el-input v-model="item.width" placeholder="宽度" size="small"   @blur.prevent="changeCols()"/>
                
                <div class="close-btn select-line-icon" @click="removeSelectItem(index)">
                  <i class="el-icon-remove-outline" />
                </div>
              </div>
             </draggable>
            <div style="margin-left: 20px;">
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addSelectItem">
                添加列
              </el-button>
            </div> 
            
          </el-collapse-item>

          <el-collapse-item title="表头样式" name="3">

            <el-form-item v-if="configData.chartOption.isthead!==undefined" label="显示表头">
                <el-switch v-model="configData.chartOption.isthead" />
            </el-form-item>

            <el-form-item v-if="configData.chartOption.isLeft!==undefined" label="对齐方式">
              <el-select v-model="configData.chartOption.isLeft" placeholder="请选择">
                <el-option label="居左" value="left"></el-option>
                <el-option label="居中" value="center"></el-option>
                <el-option label="居右" value="right"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.theadheight!==undefined " label="行高">
              <el-input-number v-model="configData.chartOption.theadheight" controls-position="right"  :step="1"></el-input-number>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.theadfontsize!==undefined" label="字体大小">
              <el-slider v-model="configData.chartOption.theadfontsize" :min="1" :max="200" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.theadfontfamily!==undefined" label="字体名称">
              <el-select v-model="configData.chartOption.theadfontfamily" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontFamilys"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item v-if="configData.chartOption.theadfontcolor!==undefined" label="字体颜色">
              <el-color-picker v-model="configData.chartOption.theadfontcolor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.theadbackgroundcolor!==undefined" label="字体背景">
              <el-color-picker v-model="configData.chartOption.theadbackgroundcolor" show-alpha></el-color-picker>
            </el-form-item>
                        

          </el-collapse-item>

           <el-collapse-item title="表格样式" name="4">

             <el-form-item v-if="configData.chartOption.tbodyheight!==undefined " label="行高">
               <el-input-number v-model="configData.chartOption.tbodyheight" controls-position="right"  :step="1"></el-input-number>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.tbodyfontsize!==undefined" label="字体大小">
              <el-slider v-model="configData.chartOption.tbodyfontsize" :min="1" :max="200" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.tbodyfontfamily!==undefined" label="字体名称">
              <el-select v-model="configData.chartOption.tbodyfontfamily" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontFamilys"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="换行">
              <el-radio-group v-model="configData.chartOption.wordWrap">
                <el-radio label="hidden">超出隐藏</el-radio>
                <el-radio label="breakAll">自动换行</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item v-if="configData.chartOption.tbodyfontcolor!==undefined" label="字体颜色">
              <el-color-picker v-model="configData.chartOption.tbodyfontcolor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.evencolor!==undefined" label="奇数行颜色">
              <el-color-picker v-model="configData.chartOption.evencolor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.oddcolor!==undefined" label="偶数行颜色">
              <el-color-picker v-model="configData.chartOption.oddcolor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item label="选中样式">
              <el-color-picker v-model="configData.chartOption.selectedColor" show-alpha></el-color-picker>
            </el-form-item>

           </el-collapse-item>
          <el-collapse-item title="滚动设置" name="5">
              <el-form-item v-if="configData.chartOption.direction!==undefined" label="滚动方向">
              <el-radio-group v-model="configData.chartOption.direction">
                <el-radio label="0">向下</el-radio>
                <el-radio label="1">向上</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.velocity!==undefined " label="滚动速度">
              <el-slider v-model="configData.chartOption.velocity" :min="0" :max="5" :step="0.1" show-input></el-slider>
            </el-form-item>
            
            <el-form-item label="是否开启鼠标悬停控制">
               <el-switch v-model="configData.chartOption.hoverStop" />
            </el-form-item>

            <el-form-item v-if="configData.chartOption.singleHeight!==undefined " label="单行停顿">
              <el-slider v-model="configData.chartOption.singleHeight" :min="0" :max="500" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.waitTime !==undefined" label="停顿时间">
              <el-input-number v-model="configData.chartOption.waitTime" controls-position="right"  :step="500"></el-input-number>
            </el-form-item>

          </el-collapse-item>

          <el-collapse-item title="动画" name="6">
            <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
              <el-select v-model="configData.chartOption.animate" placeholder="请选择">
                <el-option
                  v-for="item in animateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>

        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          <data-source-config :dataSourceType="configData.chartOption.dataSourceType" :customData="configData" :customId="configData.customId" 
            @changeSource="changeSource"  @changeData="changeData" :baseType="'table'"></data-source-config>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>
        </el-form>
        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>

        <!-- 组件交互 -->
        <el-form v-show="currentTab === 'interaction'" size="small" label-width="90px">
          <el-form-item  label="是否开启图表联动">
              <el-switch v-model="configData.chartOption.isLink"  @change="isLinkChange"/>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.isLink===true"  label="设置">
           <!-- <draggable
              :animation="340"
              group="selectLinkageItem"
              handle=".option-drag"
              style="height:480px; overflow-y:scroll;"
            > 
            
            <div style="display:flex">
              <el-form-item label="联动列表" style=""></el-form-item>
            </div> -->
            
            <div v-if="linkageCols.length > 0" style="height:300px;overflow:auto">
            
              <div  v-show="configData.chartOption.isLink===true"  v-for="(item, index) in linkageCols" :key="index" class="linkage-item">
                
                  <!--<el-input v-model="item.field" placeholder="触发联动列" style="width: 500px;"   @blur.prevent="changeLinkageCols()"/>-->
                  <label class="linkage-label">选定要触发联动的列：</label>
                  <el-select v-model="item.field" placeholder="触发联动列"  @change="changeLinkageCols()">
                    <el-option
                        v-for="item in cols"
                        :key="item.field"
                        :label="item.title"
                        :value="item.field">
                      </el-option>
                  </el-select>
                  <!--<el-input v-model="item.bindingChart" placeholder="联动下级图表" size="small"   @blur.prevent="changeLinkageCols()"/>-->
                  <label class="linkage-label">请选择与本列联动的下级图表：</label>
                  <el-select v-model="item.bindingChart" multiple placeholder="请选择"  @change="changeLinkageCols()">
                    <el-option
                        v-for="item in chartList"
                        :key="item.customId"
                        :label="item.layerName"
                        :value="item.customId">
                      </el-option>
                  </el-select>
                  <label class="linkage-label">请填写参数名：</label>
                  <el-input v-model="item.paramName" placeholder="参数名" style="width: 194px;"  @blur.prevent="changeLinkageCols()"/>

                  <label class="linkage-label">请选择绑定列字体颜色：</label>
                  <el-color-picker v-model="item.linkColor" show-alpha @change="changeLinkageCols()"></el-color-picker>
                
                <div class="delete-icon" @click="removeLinkageItem(index)">
                  <i class="el-icon-remove-outline" />
                </div>
              </div>
             <!-- </draggable> -->
            </div>
            <div style="margin-left: 20px;">
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addLinkageItem">
                添加列表
              </el-button>
            </div>
          </el-form-item>
          
          <el-form-item  v-show="configData.chartOption.isLink===true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">参数名=选中值</i></span>
            </div>            
          </el-form-item> 
          <!-- 组件下钻 -->

          <el-form-item  label="是否开启图表下钻">
              <el-switch v-model="configData.chartOption.isDrillDown" @change="isDrillDownChange"/>
          </el-form-item>

            <el-form-item v-show="configData.chartOption.isDrillDown===true"  label="设置">
              <div v-if="drillCols.length > 0" style="height:350px;overflow:auto">
                <div v-show="configData.chartOption.isDrillDown===true"  v-for="(item, index) in drillCols" :key="index" class="linkage-item">
                
                  <!--<el-input v-model="item.field" placeholder="触发联动列" style="width: 500px;"   @blur.prevent="changeLinkageCols()"/>-->
                  <label class="linkage-label">选定要触发联动的列：</label>
                  <el-select v-model="item.field" placeholder="触发联动列"  @change="changeDrillCols()">
                    <el-option
                        v-for="item in cols"
                        :key="item.field"
                        :label="item.title"
                        :value="item.field">
                      </el-option>
                  </el-select>
                  <!--<el-input v-model="item.bindingChart" placeholder="联动下级图表" size="small"   @blur.prevent="changeLinkageCols()"/>-->
                  <label class="linkage-label">请选择与本列联动的下级图表：</label>
                  <el-select v-model="item.bindingChart" clearable filterable placeholder="请选择" @change="drillDownChartChange($event,index)">
                    <el-option
                      v-for="item in drillDownOptions"
                      :key="item.chartType"
                      :label="item.layerName"
                      :value="item.chartType">
                    </el-option>
                  </el-select>
                  <label class="linkage-label">请填写参数名：</label>
                  <el-input v-model="item.paramName" placeholder="参数名" style="width: 194px;"  @blur.prevent="changeDrillCols()"/>

                  <label class="linkage-label">请选择绑定列字体颜色：</label>
                  <el-color-picker v-model="item.linkColor" show-alpha @change="changeDrillCols()"></el-color-picker>

                  <label class="linkage-label">弹窗背景颜色：</label>
                  <el-color-picker v-model="item.drillBgColor" show-alpha @change="changeDrillCols()"/>

                  <drill-down-config :drillDownDialogFlag.sync="item.drillDownDialogFlag" :drillDownDialogData="item.drillDownChartOption"/>
                  <label class="linkage-label">设置：</label>
                  <el-button type="primary" @click="DrillDownClick(index)">前去设置</el-button>

                
                  <div class="delete-icon" @click="removeDrillItem(index)">
                    <i class="el-icon-remove-outline" />
                  </div>
                </div>
              </div>        
            <div>
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addDrillItem">
                添加列表
              </el-button>
            </div>
          </el-form-item>
          <el-form-item  v-show="configData.chartOption.isDrillDown===true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">参数名=选中值</i></span>
            </div>            
          </el-form-item> 
          <!-- 是否开启图表远程控制 -->
        
          <el-form-item  label="是否开启图表远程控制">
                <el-switch v-model="configData.chartOption.isRemote" />
          </el-form-item>
           
            <el-form-item v-show="configData.chartOption.isRemote===true"  label="设置">
              <div v-if="remoteCols.length > 0" style="height:220px;overflow:auto">
                <div v-show="configData.chartOption.isRemote===true"  v-for="(item, index) in remoteCols" :key="index" class="linkage-item">
                
                  <label class="linkage-label">选定要触发远程控制的列：</label>
                  <el-select v-model="item.field" placeholder="触发远程控制列"  @change="changeRemoteCols()">
                    <el-option
                        v-for="item in cols"
                        :key="item.field"
                        :label="item.title"
                        :value="item.field">
                      </el-option>
                  </el-select>
                  <label class="linkage-label">请选择触发远程控制的接口：</label>
                  <el-select v-model="item.interfaceKey" placeholder="请选择"  @change="setInterfaceKey(item.interfaceKey,index)">
                    <el-option
                      v-for="item in socketOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      >
                    </el-option>
                  </el-select>

                  <label class="linkage-label">请选择绑定列字体颜色：</label>
                  <el-color-picker v-model="item.linkColor" show-alpha @change="changeRemoteCols()"></el-color-picker>
                
                  <div class="delete-icon" @click="removeRemoteItem(index)">
                    <i class="el-icon-remove-outline" />
                  </div>
                </div>
              </div>        
            <div>
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addRemoteItem">
                添加列表
              </el-button>
            </div>
          </el-form-item>
          <el-form-item  v-show="configData.chartOption.isRemote===true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">绑定列值=选中值</i></span>
            </div>            
          </el-form-item>           
        </el-form>

      </el-scrollbar>
    </div>
    
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog> 
  </div>
</template>

<script>

import {animateOptions} from '../../animate/animate'
import draggable from 'vuedraggable'
import DrillDownConfig from './drillDown/drillDownConfig'
import { drillDownOptions, getDrillDownOption } from '@/views/tool/datav/components/config/drillDown/drillDown'
import { getLinkChart} from "../../util/LinkageChart";
import { listSysWebsocket} from "@/api/tool/SysWebsocket";
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import DataSourceConfig from '@/views/tool/datav/components/config/DataConfig/DataSourceConfig'

export default {
  components: {
    draggable,
    DrillDownConfig,
    DataSourceConfig,
    DataEditor
  },
  props: ["costomData", "drawingList"],
  data() {
    return {
      fontFamilys:this.fontFamilys,
      activeNames: ['1'],
      currentTab: 'field',
      configData: this.costomData,
      animateOptions,
      drillDownOptions,
      cols: JSON.parse(JSON.stringify(this.costomData.chartOption)).cols,
      linkageCols: this.costomData.chartOption.linkageCols != undefined ? JSON.parse(JSON.stringify(this.costomData.chartOption)).linkageCols : [{
                field: '',
                bindingChart: [],
                linkColor: 'rgba(255, 255, 255, 0.6)',
                paramName: ''
              }],
      drillCols: this.costomData.chartOption.drillCols != undefined ? JSON.parse(JSON.stringify(this.costomData.chartOption)).drillCols : [{
          field: '',
          bindingChart: '',
          paramName: '',
          linkColor: 'rgba(255, 255, 255, 0.6)',
          drillBgColor: 'rgba(4, 12, 121, 1)',
          drillDownDialogFlag : false,
          drillDownChartOption: new Object()
        }],
      remoteCols: this.costomData.chartOption.remoteCols != undefined ? JSON.parse(JSON.stringify(this.costomData.chartOption)).remoteCols : [{
          field: '',
          interfaceKey: '',
          interfaceUrl: '',
          interfaceName: '',
          linkColor: 'rgba(255, 255, 255, 0.6)',
        }],
      staticDataValue: this.costomData != null ? JSON.stringify(this.costomData.chartOption.staticDataValue) : '',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      
      chartList: this.drawingList,
      
      //ws接口列表
      socketOptions:[],
      aceKey:Math.random(),
      open:false,
    }
  },
  //页面加载完执行
  mounted() {
    //获取可联动组件列表
    let chartList = getLinkChart(this.drawingList);
    this.chartList = chartList;

    //ws接口列表
    this.getSocketOptions();    
  },
  computed: {
    
  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
        
        if(newVal.chartOption.drillCols != undefined && newVal.chartOption.drillCols != null){
          this.drillCols = newVal.chartOption.drillCols;
        }
       
      }
    },
    
  },
  methods: {
    changeSource(val){
      this.$set(this.configData.chartOption, 'dataSourceType', val);
    },
    changeData(val,id,type){
      if(this.configData.customId == id){
        if(type == 'static'){
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(val));
        }else if(type == 'url'){
          
          if(val.type == "interfaceUrl"){
            this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
          }else if(val.type == "requestParameters"){
            this.$set(this.configData.chartOption, 'requestParameters', val.arr);
          }else if(val.type == "requestMethod"){
            this.$set(this.configData.chartOption, 'requestMethod', val.arr);
          }else if(val.type == "token"){
            this.$set(this.configData.chartOption, 'token', val.arr);
          }else if(val.type == "timeout"){
            this.$set(this.configData.chartOption, 'timeout', val.arr);
          }
        }else if(type == 'database'){
          this.$set(this.configData.chartOption, 'database', val.database);
          this.$set(this.configData.chartOption, 'bi', val.bi);
        }else if(type == 'form'){
          this.$set(this.configData.chartOption, 'formSource', val);
        }else if(type == 'websocket'){
           this.$set(this.configData.chartOption, 'interfaceKey', val);
        }
      }
      
    }, 
    addSelectItem(){
      this.cols.push({
        field: '',
        title: '',
        width: 10
      })
    },
    removeSelectItem(index){
      
      let newCols = this.cols;
      newCols.splice(index, 1);
      this.$set(this.configData.chartOption, 'cols',JSON.parse(JSON.stringify( newCols)));

    },
    changeCols(){
      this.$set(this.configData.chartOption, 'cols',JSON.parse(JSON.stringify( this.cols)));
    },
    changeState(){
      this.cols = []
      this.$set(this.configData.chartOption, 'cols', []);
    },
    
    addLinkageItem(){
      this.linkageCols.push({
        field: '',
        bindingChart: [],
        paramName: '',
        linkColor: 'rgba(255, 255, 255, 0.6)',
      })
    },
    removeLinkageItem(index){
      let newCols = this.linkageCols;
      newCols.splice(index, 1);
      this.$set(this.configData.chartOption, 'linkageCols',JSON.parse(JSON.stringify( newCols)));

    },
    changeLinkageCols() {
      this.$set(this.configData.chartOption, 'linkageCols',JSON.parse(JSON.stringify( this.linkageCols)));
    },
    addDrillItem(){
      this.drillCols.push({
        field: '',
        bindingChart: '',
        paramName: '',
        linkColor: 'rgba(255, 255, 255, 0.6)',
        drillBgColor: 'rgba(4, 12, 121, 1)',
        drillDownDialogFlag : false,
        drillDownChartOption: new Object()
      })
    },
    removeDrillItem(index){
      let newCols = this.drillCols;
      newCols.splice(index, 1);
      this.$set(this.configData.chartOption, 'drillCols',JSON.parse(JSON.stringify( newCols)));

    },
    changeDrillCols() {
      this.$set(this.configData.chartOption, 'drillCols',JSON.parse(JSON.stringify( this.drillCols)));
    },
    isLinkChange() {
      if (this.configData.chartOption.isLink == true) {
        this.$set(this.configData.chartOption, 'isDrillDown', false);
        //this.configData.chartOption.isDrillDown == false;
      }
    },
    isDrillDownChange() {
      if (this.configData.chartOption.isDrillDown == true) {
        this.$set(this.configData.chartOption, 'isLink', false);
        //this.configData.chartOption.isLink == false;
      }
    },
    drillDownChartChange(value,index) {

      const chartOption = getDrillDownOption(value, this.configData.chartOption.theme, this.configData.chartOption.bindingDiv + 'cols' + index);
      
      if(chartOption != null){
        chartOption.x = -1;
        chartOption.y = -1;
        chartOption.width = 900;
        chartOption.height = 600;

      }   

      this.drillCols[index].drillDownChartOption = chartOption;

      this.$set(this.configData.chartOption, 'drillCols',JSON.parse(JSON.stringify( this.drillCols)));  

    },
    DrillDownClick(index) {
      if (this.drillCols[index].drillDownChartOption == undefined || this.drillCols[index].drillDownChartOption == null) {
        this.$notify({
          title: '警告',
          message: '请选择关联的下钻组件',
          type: 'warning'
        });
        return false;
      }
      this.drillCols[index].drillDownDialogFlag = true;
    },
    
    getSocketOptions(){
      listSysWebsocket().then(response => {
          for(let res of response.rows){
              this.socketOptions.push({
                  label:res.interfaceName,
                  value:res.interfaceKey,
                  url:res.interfaceUrl
              })
          }
      })
    },    
    addRemoteItem(){
      this.remoteCols.push({
        field: '',
        interfaceKey: '',
        interfaceUrl: '',
        interfaceName: '',
        linkColor: 'rgba(255, 255, 255, 0.6)',
      })
    },
    removeRemoteItem(index){
      let newCols = this.remoteCols;
      newCols.splice(index, 1);
      this.$set(this.configData.chartOption, 'remoteCols',JSON.parse(JSON.stringify( newCols)));

    },
    changeRemoteCols() {
      this.$set(this.configData.chartOption, 'remoteCols',JSON.parse(JSON.stringify( this.remoteCols)));
    },
    setInterfaceKey(key,index){

        for(let item of this.socketOptions){
            if (item.value == key){
                this.remoteCols[index].interfaceUrl = item.url
                this.remoteCols[index].interfaceName = item.label
            }
        }
        this.$set(this.configData.chartOption, 'remoteCols',JSON.parse(JSON.stringify( this.remoteCols)));
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.el-input--medium .el-input__inner {
    height: 32px !important;
    width: 90px !important;
}
.el-form-item__label{
  width:30px
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}

.delete-icon{
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  cursor: pointer;
  color: #f56c6c;
}
.linkage-item {
  border: 1px solid rgb(0, 132, 255);
  margin-bottom: 10px;
  padding: 10px;
  display: inline-grid;
}

.linkage-label {
  font-size: 12px;
  color: #6e6e6e;
  display: inline-block;
  max-width: 100%;
  margin: 5px;
}

/deep/ .center-tabs .el-tabs__item {
    width: 25%;
    text-align: center;
}
.screen>:first-child{
  margin-top:37px
}
/**  滚动条凹槽的颜色，还可以设置边框属性  **/
::-webkit-scrollbar-track-piece { 

  background-color:#f8f8f8; 
  border-radius: 10px;
}
/** 滚动条的宽度  **/
::-webkit-scrollbar {

  width:9px;

  height:9px; 

}
/** 滚动条的设置  **/
::-webkit-scrollbar-thumb {

  background-color:#dddddd;

  background-clip:padding-box;

  min-height:28px; 
  border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

  background-color:#bbb; 

}
/deep/ .el-upload-dragger {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 225px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
</style>